<template>
  <i :class="iconClass" class="icon-i" :style="{ '--fontSizes': fontSize }"></i>
</template>

<script setup>
const props = defineProps({
  icon: {
    type: String,
    default: ''
  },
  color: {
    type: String
  },
  fontSize: {
    type: Number || String,
    default: '26'
  }
})

const iconClass = computed(() => {
  return `iconfont ${props.icon}`
})
const fontSize = computed(() => {
  return `${props.fontSize}px`
})
</script>
<style lang="scss" scoped>
//   background-color: red;
.icon-i {
  display: inline-block;
  margin-top: 7px;

  &::before {
    font-size: var(--fontSizes) !important;
  }
}
</style>
